<template>
	<div style="padding: 20px 10px;">
		<el-row style="margin-bottom: 20px;">
			<label for="">标题：{{articles.title}}</label>
			<el-input style='width: 80%;' v-model="title" placeholder="请输入标题"></el-input>
		</el-row>
		<el-row v-if="articleId" style="margin-bottom: 20px;">
			<el-col :span="5">
				<label for="">商家名称：{{articles.username}}</label>
			</el-col>
			<el-col :span="5">
				<label for="">浏览量：{{articles.scan_num}}</label>
			</el-col>
			<el-col :span="8">
				<label for="">发布时间：{{articles.addtime}}</label>
			</el-col>
			<el-col :span="3">
				<img :src="smallImageUrl" style="width: 100px;"/>
			</el-col>
		</el-row>
		<el-row style="margin-bottom: 60px;">
			<quill-editor v-model="articles.content" :options="editorOption"></quill-editor>
		</el-row>
		<el-row v-for="item in articles_pl" style="margin-bottom: 20px;">
			<el-col :span="8">
				<label for="">用户id：{{item.id}}</label>
			</el-col>
			<el-col :span="8">
				<label for="">用户名：{{item.username}}</label>
			</el-col>
			<el-col :span="8">
				<label for="">{{item.addtime}}</label>
			</el-col>
			<el-col :span="24">
				<label for="">{{item.content}}</label>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import http from 'assets/js/http.js'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import { quillEditor } from 'vue-quill-editor'
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				articleId: null,
				title: '',
				username: null,
				time: null,
				fileList2: [],
				smallImageUrl: null,
				content: null,
				articles_pl: [],
				articles: {},
				editorOption: {
					placeholder: '输入发布文章的内容',
					modules: {
						toolbar: [
							['bold', 'italic', 'underline', 'strike'], // toggled buttons
							[{
								'header': [1, 2, 3, 4, 5, 6, false]
							}],
							['blockquote', 'code-block'],
							['link', 'image'],

						]
					}
				}
			}
		},
		created() {
			_g.closeGlobalLoading()
			this.articleId = this.$route.params.id
			console.log('this.articleId', this.articleId)
			if(this.articleId) {
				_g.openGlobalLoading()
				this.getArticleData(this.articleId)
			}
		},
		methods: {
			getArticleData(articleId) {
				let data = {
					type: 2,
					article_id: articleId
				}
				this.apiPost('/AdminApi/Article/article_deta', data).then(res => {
					console.log('获取详情data', data)
					this.handelResponse(res, data => {
						this.articles = data.articles
						this.articles_pl = data.articles_pl
						_g.closeGlobalLoading()

					})
				})
			},
			

		},
		mixins: [http]

	}
</script>
<style scoped>
	.quill-editor {
		height: 245px;
		.ql-container {
			height: 180px;
		}
	}
</style>